<template>
  <!-- 轮播图 -->
  <div class="banner" v-if="imageList.length > 0">
    <van-swipe class="swipe" indicator-color="rgba(58 , 61, 75 ,0.4)" loop autoplay="5000">
      <van-swipe-item v-for="(item, index) in imageList" :key=index @click='clickActive(item, index)'>
        <img :src="item.coverImagUrl + '?x-oss-process=image/resize,m_fixed,h_390,w_690'">
        <div class="swipe-item">
          <div class="swipe-item-bg" v-if="item.type == 3 && item.zbState == 0 || item.zbState == 1">
            <img src="@/assets/images/zxjt/bannerBg.png" alt="">
          </div>
          <div class="swipe-item-left">
            <img v-if="item.zbState == 0 && item.type == 3" src="@/assets/images/zxjt/yugao.png" alt="" class="type">
            <img v-if="item.zbState == 1 && item.type == 3" src="@/assets/images/zxjt/zhibozhong.png" alt=""
              class="type zhibozhong">
            <img v-if="(item.zbState == 2 && item.type == 3) || item.type == 4" src="@/assets/images/zxjt/huikan.png"
              alt="" class="type">
            <span v-if="item.zbState == 0 && item.type == 3">预告</span>
            <span v-if="item.zbState == 1 && item.type == 3">直播中</span>
            <span v-if="(item.zbState == 2 && item.type == 3) || item.type == 4">回看</span>
            <span v-if="item.zbState == 0 && item.type == 3" class="span-right">{{ item.beginTime | filterTime }}</span>
            <span v-if="item.zbState == 1 && item.type == 3" class="span-right-zhibozhong">{{ item.people |
                filterPeople(1)
            }}人观看</span>
          </div>
          <div class="swipe-item-right">
            <img src="@/assets/images/zxjt/guanggao.png" alt="" v-if="item.adBlock == 1">
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
  import { getAdlist } from '@/util/api.js';
export default {
  filters: {
    filterPeople: function (value, fixed) {
      if (typeof value == "undefined") {
        return 0
      } else if (value < 10000) {
        return value
      } else {
        return (value / 10000).toFixed(fixed) + "w";
      }
    },
    filterTime: function (type) {
      if (type) {
        return `${type.slice(5, 7)}月${type.slice(8, 10)}日  ${type.slice(11, 13)}:${type.slice(14, 16)}`
      }
    }
  },
  data() {
    return {
      imageList: [],
    }
  },
  created() {
    this.getBannerList()
  },
  methods: {
    async getBannerList() {
      try {
        const dataMsg = await getAdlist(1);
        const { data ,code } = dataMsg.data;
        if(code === '000000'){
            this.imageList = data.splice(0,10)
        }
      } catch (error) {
        
      }
    },
    clickActive(item, index) {
      //type  类型:1-长图|2-自定义链接|3-直播场次|4-视频"
      const { type ,imagUrl,link ,roomId,relVid} = item;
      switch (type) {
        case 1:
            this.$store.dispatch("dispatchBannerImgLink", imagUrl)
            this.$router.push(`/${this.$channel}/bannerLink`);
          break;
        case 2:
          if(window.terminal.isZxjtqhApp){
            fun.zxjtqhLinkUrl(link);
          }else if(window.terminal.isZxjtApp){
            const params = {
              linkType:1,
              link,
            }
            fun.zxjtAppLink(params);
          }else{
            window.location.href = link;
          }
          break;
        case 3:
            this.$router.push(`/${this.$channel}/liveRoom/${roomId}`)
          break;
        case 4:
            this.$router.push(`/${this.$channel}/liveBack/${relVid}`);
          break;
        default:
          break;
      }
    }
  }
}
</script>

<style scoped="scoped" lang="less">
.banner {
  width: 690px;
  height: 390px;
  margin: auto;
  margin-top: 60px;
  .swipe {
    position: relative;
  }
}

.van-swipe-item img {
  width: 100%;
  height: 390px;
  border-radius: 8px;
}

/* 分页器样式 */
/deep/ .van-swipe__indicator {
  width: 13px;
  height: 9px;
  border-radius: 9px;
  margin-right: 8px;
  background: rgba(183, 183, 183, 0.5);
}

/deep/ .van-swipe__indicator--active {
  width: 19px;
  height: 9px;
  background: rgba(58, 61, 75, 0.4);
  border-radius: 9px;
}

/deep/ .van-swipe__indicators {
  margin-left: 250px;
  margin-bottom: 40px
}



.swipe-item {
  width: 100%;
  height: 58px;
  position: absolute;
  top: 0;
  left: 0;
  .swipe-item-bg {
      img {
      width: 241px;
      height: 58px;
      margin-left: 56px;
    }
  }
  .swipe-item-left{
    .type {
      width: 98px;
      height: 58px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .zhibozhong {
      width: 117px;
    }
    span {
      font-size: 28px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 40px;
      position: absolute;
      top: 10px;
      left: 12px;
    }
    .span-right {
      left: 93px !important;
    }
  }
  .swipe-item-right{
    img {
      width: 94px;
      height: 67px;
      position: absolute;
      top: 19px;
      right: 17px;
    }
    .span-right-zhibozhong {
      margin-left: 112px;
    }
  }
}



</style>
